<template>
    <div class="login">
        <div class="title">大白后台管理系统</div>
        <div class="form_container">
            <div class="manage_tip">
                <el-form :model="loginUser" status-icon :rules="rules" ref="loginForm" label-width="60px"
                    class="demo-ruleForm">
                    <el-form-item label="邮箱" prop="email">
                        <el-input type="text" v-model="loginUser.email" placeholder="请输入email"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input type="password" v-model="loginUser.password" placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" class="submit_btn" @click="submitForm('loginForm')">登录</el-button>
                    </el-form-item>
                    <div class="tiparea">
                        <p>还没有账号？现在<router-link to="/register">注册</router-link>
                        </p>
                    </div>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'login',
    data() {
        return {
            loginUser: {
                email: '',
                password: '',
            },
            rules: {
                email: [
                    { type: 'email', required: true, message: '邮箱格式不正确', trigger: 'blur' },
                ],
                password: [
                    { required: true, message: '密码不能为空', trigger: 'blur' },
                    { min: 6, max: 15, message: '长度要在6-15个字符之间', trigger: 'blur' }
                ],
            }
        }
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$store.dispatch('login', this.loginUser).then(res => {
                        if (res.status === 0) {
                            this.$router.push('/index')
                            location.reload()
                        }
                    })
                    // this.$axios.post('http://127.0.0.1:8080/api/user/login', this.loginUser).then(res => {
                    //     //token
                    //     const token = res.data.token
                    //     //存储到ls
                    //     localStorage.setItem('token', token)
                    //     this.$router.push('/index')
                    // })
                }
            });
        },
    }
}

</script>

<style scoped>
.login {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url(../assets/bg.jpg);
    background-size: 100% 100%;
    height: 100%;
    flex-direction: column;
}

.form_container {
    background-color: #fff;
    border-radius: 10px;
}

.title {
    font-family: "Microsoft YaHei";
    font-weight: bold;
    font-size: 26px;
    margin-bottom: 25px;
}

.demo-ruleForm {
    padding: 25px;
}

.submit_btn {
    width: 100%;
}

.tiparea {
    text-align: right;
    font-size: 12px;
    color: #333;
}

.tiparea p a {
    color: #409eff;
}
</style>